import React, {Component} from 'react'
import { Card, Tabs, message, Icon } from 'antd'
import './index.less'

const TabPane = Tabs.TabPane;

class Tab extends Component{
    newTabIndex = 0
    handleCallback = (key) => {
        message.info('当前key:' + key)
    }
    componentWillMount() {
        const panes = [
            {
                title: 'Tab1',
                content: 'Tab 1',
                key: '1',
                closable: false
            },
            {
                title: 'Tab2',
                content: 'Tab 2',
                key: '2'
            },
            {
                title: 'Tab3',
                content: 'Tab 3',
                key: '3'
            },
        ]
        this.setState({
            panes,
            activeKey: panes[0].key
        })
    }
    handleMapChange = (activeKey) => {
        this.setState({
            activeKey
        })
    }
    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }
    add = () => {
        const panes = this.state.panes;
        const activeKey = `newTab${this.newTabIndex++}`;
        panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
        this.setState({ panes, activeKey });
    }
    
    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1;
          }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
          activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    }

    render() {
        return (
            <div>
                <Card title="Tab页签" className="card-wrap">
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab="菜单1" key="1">001</TabPane>
                        <TabPane tab="菜单2" key="2" disabled>002</TabPane>
                        <TabPane tab="菜单3" key="3">003</TabPane>
                    </Tabs>
                </Card>

                <Card title="Tab带图页签" className="card-wrap">
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="delete"/>Tab 1</span>} key="1">001</TabPane>
                        <TabPane tab={<span><Icon type="radar-chart" />Tab 2</span>}  key="2">002</TabPane>
                        <TabPane tab={<span><Icon type="heat-map" />Tab 3</span>} key="3">003</TabPane>
                    </Tabs>
                </Card>

                <Card title="Tab循环" className="card-wrap">
                    <Tabs 
                        defaultActiveKey={this.state.activeKey} 
                        onChange={this.handleMapChange}
                        type="editable-card"
                        onEdit={this.onEdit}
                        >
                        {
                            this.state.panes.map((item) => {
                                return (
                                    <TabPane key={item.key} tab={item.title}>{item.content}</TabPane>
                                )
                            })
                        }
                    </Tabs>
                </Card>
            </div>
        )
    }
}

export default Tab